<template>
  <div class="flex flex-column" style="height: 100%">
    <div v-show="formAge" class="flex-sub">
      <div class="hm-select-area bg-white font-14">
        <el-row>
          <el-col :span="12">
            <el-input class="hta-input" placeholder="搜索关键字" v-model="searchObj.keywords">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" >搜索</el-button>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button class="hta-btn-export border-blue" type="primary" @click.native="addNotice">添加</el-button>
          </el-col>
        </el-row>
      </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我的停车场" name="first">
              <div v-for="(item,index) in parkingLotList" :key="index">
                <div class="vfor bg-white" >
                  <div class="center">{{item.parking_lot_name}}</div>
                  <img v-if="item.img" :src='item.img[0].img_url' @error="nofind" width="99%" height="150"/>
                  <!-- <img v-if="!item.img" src='../../assets/images/login_bg.png' width="99%" height="150"/> -->
                  <p class="addres">位置:{{item.parking_lot_address}}</p>
                  <p class="addres">车位数:{{item.place_count}}<span class="addre" @click="detailInfo(item)">详情</span></p>
                </div>
              </div>
          </el-tab-pane>
        </el-tabs>    
    </div>
    <!--添加、详情    -->
    <el-dialog
      :title="titles"
      :visible.sync="dialogVisible"
      width="65%"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form v-show="firstpage" :model="addForm" ref="addForm" label-width="120px">
        <el-row>
          <el-form-item>  
            <el-radio-group v-model="addForm.parking_lot_type" >
              <el-radio label="PARKING_LOT">停车场</el-radio>
              <el-radio label="COMMUNITY">小区停车</el-radio>
              <el-radio label="ROADSIDE">路边停车</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>  
        <el-row>
          <el-col :span="8" >
            <el-form-item label="收取分红比例为:" style="margin-left:75px;">
              <el-input type="text" v-model="addForm.proportion" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="iconstop">
            <div>%</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="名称" prop="parking_lot_name" >
              <el-input type="text" v-model="addForm.parking_lot_name" placeholder="请输入停车场名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="营业时间" style="margin-left:20px;">
                <el-time-picker value-format='HH:mm'  v-model="addForm.business_begin_time" placeholder="营业开始时间" style="width:150px;float:left;margin-right:30px;"></el-time-picker>
                <el-time-picker value-format='HH:mm' v-model="addForm.business_end_time" placeholder="营业结束时间" style="width:150px;float:left;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
             <el-form-item label="位置" prop="parking_lot_address">
              <el-input type="text"  v-model="addForm.parking_lot_address" placeholder="请选择位置"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="iconstop" style="cursor: pointer;font-size:20px;">
            <i class="el-icon-location" @click="location"></i>
          </el-col>
          <el-col :span="12" style="margin-left:20px;">
            <el-form-item label="联系方式" >
              <el-input type="xt" v-model="addForm.contact_phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>    
        </el-row>  
        <el-row class="margintop">
          <el-col :span="11">
             <el-form-item label="出口">
              <el-input type="text" v-model="addForm.exit" placeholder="请输入出口"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="marginleft">
            <el-form-item label="车场照片" >
              <el-upload ref="upload" action="#" list-type="picture-card" 
                :on-remove="handleRemove"  :file-list="fileList" :on-change="handleChange" :auto-upload="false">
                  <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>    
        </el-row>
        <el-row>
          <el-col :span="11">
             <el-form-item label="入口">
              <el-input type="text" v-model="addForm.entrance" placeholder="请输入入口"></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12" class="marginleft">
            <el-form-item  label="是否预约">  
              <el-radio-group v-model="addForm.is_appoint" >
                <el-radio label="YES">是</el-radio>
                <el-radio label="NO">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>        
      </el-form>
       <el-form v-show="orderpage" :model="addForm" ref="addForm" label-width="120px" style="margin-left:100px;">
        <div class="xiexian"><i class="el-icon-arrow-left xiexianson" @click="orderback"></i></div>
        <el-row>
          <el-col :span="2">
            <div class="fontweight">预约费</div>
          </el-col>
          <el-col :span="6" style="margin-top:-8px;margin-bottom:20px;">
              <el-input type="text" v-model="addForm.appoint_price" placeholder="请输入预约费"></el-input>
          </el-col>
          <el-col :span="1" class="icons">
            <div>元</div>
          </el-col>
        </el-row> 
        <el-row>
          <el-col :span="12">
            <el-col :span="11" class="marginright">
              <div class="fontweight">车主可提前多久预约</div>
            </el-col>
            <el-col :span="3">
              <div class="zdy" @click="zdy">自定义</div>
            </el-col>
          </el-col>
        </el-row> 
        <el-row>
          <el-col :span="14">
            <el-form-item>  
              <el-radio-group v-model="addForm.appoint_time" >
                <el-radio label="5">5分钟</el-radio>
                <el-radio label="10">10分钟</el-radio>
                <el-radio label="20">20分钟</el-radio>
                <el-radio label="30">30分钟</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-show="zdyshow1">
            <el-form-item>  
              <el-input type="text" v-model="addForm.appoint_time" placeholder="提前预约时间"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" v-show="zdyshow1" class="icons">
            <div>分钟</div>
          </el-col>
        </el-row>  
        <el-row>
          <el-col :span="12">
            <el-col :span="11" class="marginright">
              <div class="fontweight">车主可提前免费取消预约时间</div>
            </el-col>
            <el-col :span="3">
              <div class="zdy" @click="zdy2">自定义</div>
            </el-col>
          </el-col>
        </el-row> 
        <el-row>
          <el-col :span="14">
            <el-form-item>  
              <el-radio-group v-model="addForm.cancel_appoint_time" >
                <el-radio label="5">5分钟</el-radio>
                <el-radio label="10">10分钟</el-radio>
                <el-radio label="20">20分钟</el-radio>
                <el-radio label="30">30分钟</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-show="zdyshow2">
            <el-form-item>  
              <el-input type="text" v-model="addForm.cancel_appoint_time" placeholder="提前预约时间"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" v-show="zdyshow2" class="icons">
            <div>分钟</div>
          </el-col>
        </el-row>
         <el-row style="margin-top:35px;">
          <el-col :span="6">
              <div class="fontweight">超出预约出场时间的部分按单价</div>
          </el-col>
          <el-col :span="6" style="margin-top:-8px;margin-bottom:20px;">
              <el-input type="text" v-model="addForm.multiple" placeholder="请输入倍数"></el-input>
          </el-col>
          <el-col :span="6" class="icons">
            <div>倍收取停车费</div>
          </el-col>
        </el-row>  
      </el-form>
      <el-form v-show="secondpage" :model="addForm" ref="addForm" label-width="120px" style="margin:0 0 30px 100px;">
        <div class="xiexian"><i class="el-icon-arrow-left xiexianson" @click="secondback"></i></div>
        <el-row>
          <el-form-item label="收费模式">  
            <el-radio-group v-model="addForm.fee_model" @change="feemodel">
              <el-radio label="ALL_FREE">全时段免费</el-radio>
              <el-radio label="ALL_CHARGE">全时段收费</el-radio>
              <el-radio label="PERIOD_CHARGE">部分时段收费</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <div v-if="secondsonpage">
          <el-row>
            <el-col :span="8">
              <el-form-item label="区分车型">  
                <el-switch active-value="YES" inactive-value="NO" @change="switchCar" v-model="addForm.is_car_type"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区分时段">  
                 <el-switch active-value="YES" inactive-value="NO" @change="switchTime" v-model="addForm.time_interval"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="!iScartype">
            <el-row v-if="!iSTime">
              <el-col :span="6"  style="margin:-8px 0 20px 50px;">
                  <el-input type="text" v-model="addForm.all_charge_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">日间(08:00-20:00)<i class="el-icon-edit"></i></div>
              </el-col>
              <el-col :span="4"  style="margin-top:-8px;margin-bottom:20px;">
                  <el-input type="text" v-model="addForm.day_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">夜间(20:00-08:00)<i class="el-icon-edit"></i></div>
              </el-col>
              <el-col :span="4"  style="margin-top:-8px;margin-bottom:20px;">
                  <el-input type="text" v-model="addForm.night_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div>  
          <div v-if="iScartype">
            <el-row>
              <el-col :span="3">
                <div class="fontweight marginbottom">大车</div>
              </el-col>
            </el-row>
            <el-row v-if="!iSTime">
              <el-col :span="6"  style="margin:-8px 0 20px 50px;">
                  <el-input type="text" v-model="addForm.big_car_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">日间(08:00-20:00)<i class="el-icon-edit"></i></div>
              </el-col>
              <el-col :span="4"  style="margin-top:-8px;margin-bottom:20px;">
                  <el-input type="text" v-model="addForm.big_day_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">夜间(20:00-08:00)<i class="el-icon-edit"></i></div>
              </el-col>
              <el-col :span="4"  style="margin-top:-8px;margin-bottom:20px;">
                  <el-input type="text" v-model="addForm.big_night_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div>    
          <div v-if="iScartype">
            <el-row class="margintop" >
              <el-col :span="3">
                <div class="fontweight marginbottom">小车</div>
              </el-col>
            </el-row>
            <el-row v-if="!iSTime">
              <el-col :span="6"  style="margin:-8px 0 20px 50px;">
                  <el-input type="text" v-model="addForm.small_car_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">日间(08:00-20:00)<i class="el-icon-edit"></i></div>
              </el-col>
              <el-col :span="4"  style="margin-top:-8px;margin-bottom:20px;">
                <el-input type="text" v-model="addForm.small_day_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row> 
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">夜间(20:00-08:00)<i class="el-icon-edit"></i></div>
              </el-col>
              <el-col :span="4"  style="margin-top:-8px;margin-bottom:20px;">
                  <el-input type="text" v-model="addForm.small_night_price" placeholder="请输入费用"></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div> 
          <el-row>
            <el-col :span="3">
              <div>免费停车时长</div>
            </el-col>
            <el-col :span="6"  style="margin-top:-8px;margin-bottom:20px;">
              <el-input type="text" v-model="addForm.free_parking_time" placeholder="请输入免费停车时长"></el-input>
            </el-col>  
            <el-col :span="1" class="icons">
              <div>分钟</div>
            </el-col>
          </el-row> 
          <el-row>
            <el-col :span="3">
              <div>封顶价格</div>
            </el-col>
            <el-col :span="6"  style="margin-top:-8px;margin-bottom:20px;">
              <el-input type="text" v-model="addForm.toplimit_price" placeholder="请输入封顶价格"></el-input>
            </el-col>  
            <el-col :span="1" class="icons">
              <div>元/天</div>
            </el-col>
          </el-row> 
        </div>
        <div v-if="thirdsonpage">
          <el-row>
            <el-col :span="8">
              <el-form-item label="区分车型">  
                <el-switch active-value="YES" inactive-value="NO" @change="switchCar" v-model="addForm.is_car_type"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="时间"> 
                <el-time-picker value-format='HH:mm'  v-model="addForm.begin_time" placeholder="营业开始时间" style="width:150px;float:left;margin-right:30px;"></el-time-picker>
                <el-time-picker value-format='HH:mm' v-model="addForm.end_time" placeholder="营业结束时间"   style="width:150px;float:left;"></el-time-picker>
              </el-form-item> 
            </el-col>
            <el-col :span="1">
                <div style="margin:15px 0 0 10px"><i class ="el-icon-time" style="font-size:20px;"></i></div>
            </el-col>
          </el-row>
          <div v-if="!iScartype">
            <el-row>
              <el-col :span="10">
                <el-form-item label="价格"> 
                    <el-input type="text" v-model="addForm.period_charge_price" placeholder="请输入价格"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="1" class="icons">
                  <div>元/时</div>
              </el-col>
            </el-row>
          </div>  
          <div v-if="iScartype">
            <el-row>
              <el-col :span="2">
                  <div class="fontweight marginbottom" style="float:right;">大车</div>
              </el-col>
            </el-row>  
            <el-row>
              <el-col :span="10">
                <el-form-item label="价格"> 
                    <el-input type="text" v-model="addForm.big_part_price" placeholder="请输入价格"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="1" class="icons">
                  <div>元/时</div>
              </el-col>
            </el-row>
            <el-row  v-if="iScartype">
              <el-col :span="2">
                  <div class="fontweight marginbottom" style="float:right;">小车</div>
              </el-col>
            </el-row>  
            <el-row>
              <el-col :span="10">
                <el-form-item label="价格"> 
                    <el-input type="text" v-model="addForm.small_part_price" placeholder="请输入价格"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="1" class="icons">
                  <div>元/时</div>
              </el-col>
            </el-row>
          </div> 
           <el-row>
            <el-col :span="3" style="margin-right:13px;">
              <div class="float-right">免费停车时长</div>
            </el-col>
            <el-col :span="6"  style="margin-top:-8px;margin-bottom:20px;">
              <el-input type="text" v-model="addForm.free_parking_time" placeholder="请输入免费停车时长"></el-input>
            </el-col>  
            <el-col :span="1" class="icons">
              <div>分钟</div>
            </el-col>
          </el-row> 
          <el-row>
            <el-col :span="3" style="margin-right:13px;">
              <div class="float-right">封顶价格</div>
            </el-col>
            <el-col :span="6"  style="margin-top:-8px;margin-bottom:20px;">
              <el-input type="text" v-model="addForm.toplimit_price" placeholder="请输入封顶价格"></el-input>
            </el-col>  
            <el-col :span="1" class="icons">
              <div>元/天</div>
            </el-col>
          </el-row>  
        </div>
      </el-form>  
      <div style="text-align: center;">
        <el-button type="primary" @click="orderress" v-if="titles==='添加'&&addForm.is_appoint==='YES'"><span style="margin:0 50px;">下一步</span></el-button>
        <el-button type="primary" @click="secondress" v-if="titles==='添加'&&addForm.is_appoint==='NO'"><span style="margin:0 50px;">下一步</span></el-button>
        <el-button type="primary" @click="orderress" v-if="titles==='编辑'&&addForm.is_appoint==='YES'"><span style="margin:0 50px;">下一步</span></el-button>
        <el-button type="primary" @click="secondress" v-if="titles==='编辑'&&addForm.is_appoint==='NO'"><span style="margin:0 50px;">下一步</span></el-button>
        <el-button type="primary" @click="secondorderress" v-if="titles==='预约设置'"><span style="margin:0 50px;">下一步</span></el-button>
        <el-button type="primary" @click="ReadyParking" v-if="titles==='请设置缴费标准'&&is_Ready===true"><span style="margin:0 50px;">确定</span></el-button>
        <el-button type="primary" @click="EditParking" v-if="titles==='请设置缴费标准'&&is_Ready===false"><span style="margin:0 50px;">修改</span></el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <transition name="fade" >
      <div v-show="!formAge" >
        <div class="hm-select-area bg-white font-14"  style="letter-spacing:1px;">
          <el-row class="bord">
            <el-col :span="1">
              <i class="el-icon-back" @click="back"></i>
            </el-col>
            <el-col :span="6">
              <div class="yjxq">停车场详情</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <img v-if="detailList.img" :src='detailList.img[0].img_url' @error="nofind" width="180px" height="160px"/>
              <!-- <img v-if="!detailList.img" src='../../assets/images/login_bg.png' width="180px" height="160px"/> -->
            </el-col>
            <el-col :span="19">
              <el-row>
                <el-col :span="10">
                  <div><span class="marginright" style="font-size:20px;">{{!!this.detailList.parking_lot_name?this.detailList.parking_lot_name:''}}</span><span>{{!!this.detailList.occupyCount?this.detailList.occupyCount:''}}/{{!!this.detailList.totalCount?this.detailList.totalCount:''}}</span></div>
                </el-col>
                 <el-col :span="12">
                    <div class="addredel" @click="delParking">删除</div>
                </el-col>
                <el-col :span="2">
                    <div class="addre" @click="editParking">编辑</div>
                </el-col>
              </el-row>
              <el-row class="margintop">
                <el-col :span="10">
                  <div>营业时间:每天{{!!this.detailList.business_begin_time?this.detailList.business_begin_time:''}}-{{!!this.detailList.business_end_time?this.detailList.business_end_time:''}}</div>
                </el-col>  
                <el-col :span="10">
                  <div>联系方式:{{!!this.detailList.contact_phone?this.detailList.contact_phone:''}}</div>
                </el-col>  
              </el-row>
              <el-row class="margintop">
                <el-col :span="10">
                  <div>位置:{{!!this.detailList.parking_lot_address?this.detailList.parking_lot_address:''}}</div>
                </el-col>  
                <el-col :span="10">
                  <div>出入口:{{!!this.detailList.onout?this.detailList.onout:''}}</div>
                </el-col>  
              </el-row>
              <el-row class="margintop">
                <el-col :span="10">
                  <div>收费方式:{{detailList.fee_model==='ALL_FREE'?'全时段免费':detailList.fee_model==='ALL_CHARGE'?'全时段收费':detailList.fee_model==='PERIOD_CHARGE'?'部分时段收费':''}}</div>
                </el-col>  
                <el-col :span="10">
                  <div style="color:	#FFC125">分利比例:{{!!this.detailList.proportion?this.detailList.proportion:''}}<span class="marginleft"><i class="el-icon-edit"></i></span></div>
                </el-col>  
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div class="hm-select-area bg-white font-14">
          <el-row>
            <el-col :span="10" class="areathing">
              <div v-for="(item,index) in areaArray" :key="index" @click="arearess(item,index)" plain class="marginright areaclass" :class="index===currentIndexNav?'active':''">{{item.partition_name}}</div>
              <i class="el-icon-circle-plus-outline hand" @click="addarea" style="font-size:18px;"></i>
            </el-col>
            <el-col :span="3">
              <div class="deldanger hand" @click="delArea">删除该区域</div>
            </el-col>
            <el-col :span="3">
              <div class="deldanger hand" @click="editAreas">修改该区域</div>
            </el-col>
            <el-col :span="4">
              <div class="delblue hand">批量设置</div>
              <div style="color:#00BFFF;">(批量删除、批量修改停车方式)</div>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" style="float:right;" @click="addParkingress" plain>添加车位</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-table class="home-table" :data="tableDataParking" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
              <el-table-column type="index" width="60" label="序号"/>
              <el-table-column prop="parking_place_number" label="车位号" header-align="center" align="center"></el-table-column>
              <el-table-column  label="停车方式" header-align="center" align="center">
                <template slot-scope="scope">
                  {{scope.row.is_appoint==='YES'?'可预约':scope.row.is_appoint==='NO'?'不可预约':''}}
              </template>
              </el-table-column>
              <el-table-column label="充电桩" header-align="center" align="center">
                <template slot-scope="scope">
                  {{scope.row.is_charging==='YES'?'有':scope.row.is_charging==='NO'?'无':''}}
                </template>
              </el-table-column>
              <el-table-column label="车位状态" header-align="center" align="center">
                <template slot-scope="scope">
                  {{scope.row.status	==='FREE'?'空闲':scope.row.status	==='OCCUPY'?'占用':''}}
                </template>
              </el-table-column>
              <el-table-column label="车位类别" header-align="center" align="center">
                <template slot-scope="scope">
                  {{scope.row.car_type	==='BIG'?'大车':scope.row.car_type	==='SMALL'?'小车':''}}
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type='text' @click="editInfo(scope.row)">编辑</el-button>
                  <el-button type='text' @click="delPlaceInfo(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="hm-page"
              background
              layout="prev, pager, next"
              :total="totalParking" @current-change="sizeChange">
            </el-pagination>
          </el-row>
          <!-- 添加车位 -->
           <el-dialog :title="titlesParking" :visible.sync="dialogVisibleAddParking" width="40%" :before-close="handleCloses">
              <el-form v-show="is_bulk_import" :model="addParkingList" ref="addParkingList" label-width="120px">
                  <el-row class="margintop">
                    <el-col :span="16">
                      <el-form-item label="车位编号" >
                        <el-input placeholder="请输入车位号" v-model="addParkingList.parking_place_number"></el-input>
                      </el-form-item>
                    </el-col>  
                  </el-row>
                  <el-row class="margintop">
                    <el-col :span="8">
                      <el-checkbox style="float:right;" true-label="YES" false-label="NO" v-model="addParkingList.is_appoint">可预约</el-checkbox>
                    </el-col>
                    <el-col :span="8">
                      <el-checkbox style="float:right;" true-label="YES" false-label="NO" v-model="addParkingList.is_charging">可充电</el-checkbox>
                    </el-col>
                  </el-row>
                  <el-row class="margintop">
                    <el-col :span="16">
                      <el-form-item label="车位类别" >
                        <el-select v-model="addParkingList.car_type">
                          <el-option label="小车" value="SMALL"></el-option>
                          <el-option label="大车" value="BIG"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>  
                  </el-row>
                <div class="margintop marginbottom" style="text-align: center;">
                  <el-button type="primary" v-if="titlesParking!='编辑车位'" plain @click="batchress" ><span style="margin:0 40px">批&nbsp;量&nbsp;导&nbsp;入</span></el-button>
                  <el-button type="primary" v-if="titlesParking!='编辑车位'" @click="deterress" ><span style="margin:0 40px">确&nbsp;&nbsp;定</span></el-button>
                  <el-button type="primary" v-if="titlesParking==='编辑车位'" @click="editress" ><span style="margin:0 40px">确&nbsp;&nbsp;定</span></el-button>
              </div>
              </el-form>
              <el-row v-show="!is_bulk_import">
                <div class="xiexians"><i class="el-icon-arrow-left xiexianson" @click="importback"></i></div>
                <el-row style="margin:80px 0 50px 0;">
                  <el-col :span="15">
                    <el-upload
                      class="float-right"
                      style="display: inline-block;"
                      :action='url'
                      :before-upload="handleBefore"
                      method="post"
                      :show-file-list="false"
                      :on-success="handleSuccess"
                      :headers="{token}"
                      :file-list="fileLists">
                      <!-- :data="{admin_id: admin_id}" -->
                      <el-button type="primary" size="medium"><span style="margin:0 50px;">导入</span></el-button>
                    </el-upload>
                  </el-col>
                </el-row>
                <el-row style="margin:20px 0 50px 0;">
                  <el-col :span="15">
                    <el-button type="primary" plain size="medium" @click="downloadTemplate" class="float-right"><span style="margin:0 35px;">下载模板</span></el-button>
                  </el-col>
                </el-row>
              </el-row>
           </el-dialog> 
        </div>  
      </div>
    </transition>
    <!-- 地图 -->
    <el-dialog :visible.sync="locate" width="40%" :before-close="handleCloselocate">
      <el-row >
        <div class="amap-page-container" style="margin-top:-15px;">
          <el-amap
            vid="amapDemo"  
            :center="center"
            :zoom="zoom"  
            class="amap-demo"
            :events="events">
            <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
          </el-amap>
          <div style="text-align:center;margin-top:20px;">
            <el-button type="primary" size="mini" @click="locatefal"><span style="margin:0 30px">确定</span></el-button>
          </div>
        </div>
      </el-row>
    </el-dialog> 
    <!-- 添加区域 -->
    <el-dialog :title="titlearea" :visible.sync="dialogVisibleArea" width="40%" :before-close="handleCloseArea">
      <el-form  :model="addAreaList" ref="addAreaList" label-width="120px">
        <el-row class="margintop">
          <el-col :span="16">
            <el-form-item label="区域名称" >
              <el-input placeholder="请输入区域名称" v-model="addAreaList.partition_name"></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
      </el-form>
      <div class="margintop marginbottom" style="text-align: center;">
          <el-button type="primary" v-if="titlearea==='添加区域'" @click="insertArea" ><span style="margin:0 40px"><span style="margin:0 20px;">确定</span></span></el-button>
          <el-button type="primary" v-if="titlearea==='编辑区域'" @click="editArea" ><span style="margin:0 40px"><span style="margin:0 20px;">确定</span></span></el-button>
      </div>
    </el-dialog>    
  </div>
</template>

<script>
import { exportmonth } from '@/api/request'
export default {
  name: 'index',
  data () {
    const self = this
    return {
      locate:false,
      markers: [],
      center: [117.127665, 36.679559],
      zoom: 15,
      // address: '',
      lng: 117.127665,
      lat: 36.679559,
      events: {
        click(e) {
          self.markers = []
          let { lng, lat } = e.lnglat
          self.addForm.longitude = lng
          self.addForm.latitude = lat
          self.center = [lng, lat]
          self.markers.push([lng, lat])
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });  
          geocoder.getAddress([lng ,lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.addForm.parking_lot_address = result.regeocode.formattedAddress;
                self.$nextTick();
              }
            }
          });        
        }
      },
      location(){
        //  var geolocation = new AMap.Geolocation({
        //   // 是否使用高精度定位，默认：true
        //   enableHighAccuracy: true,
        //   maximumAge: 0, //定位结果缓存0毫秒，默认：0
        //   showButton: true, //显示定位按钮，默认：true
        //   buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
        //   buttonOffset: new AMap.Pixel(10, 20), 
        //   showMarker: true,
        //   panToLocation: true,
        //   zoomToAccuracy: true,
        //   // 设置定位超时时间，默认：无穷大
        //   timeout: 5000,
        // })
        // geolocation.getCurrentPosition()
        // AMap.event.addListener(geolocation, 'complete', onComplete);
        // AMap.event.addListener(geolocation, 'error', onError);
        // console.log('具体的定位信息')
        // function onComplete(data) {
        //   console.log('具体的定位信息',data)
        // }
        // function onError(data) {
        //   // 失败 启用 ip定位
        //   AMap.plugin('AMap.CitySearch', function () {
        //     var citySearch = new AMap.CitySearch();
        //     citySearch.getLocalCity(function (status, result) {
        //       if (status === 'complete' && result.info === 'OK') {
        //           // 查询成功，result即为当前所在城市信息
        //         console.log(result)
        //         self.center = [result.bounds.Gb.lng,result.bounds.Gb.lat]
        //       }
        //     })
        //   })
        // }
          self.locate = true 
      },
      areaArray:[],
      is_Ready:true,
      is_bulk_import:true,
      areaoneList:{},
      addParkingList:{
        parking_place_number:'',
        car_type:'SMALL',
        is_appoint:'NO',
        is_charging:'NO'
      },
      addressInfo: '',
      tableData: [],
      tableDataParking:[],
      totalParking:10,
      searchParking:{
        page:1,
        page_num:10,
        partition_id:'',
        admin_id:'',
        parking_lot_id:''
      },
      activeName:'first',
      formAge:true,
      total: 1,
      parkingLotList: [],
      fileList:[],
      firstpage:true,
      orderpage:false,
      secondpage:false,
      secondsonpage:false,
      thirdsonpage:false,
      emergencyTypeLists:{},
      dialogVisible: false,
      dialogVisibleAddParking: false,
      dialogVisibleArea:false,
      zdyshow1:false,
      zdyshow2:false,
      addForm: {
        parking_lot_type:'PARKING_LOT',
        proportion:'',
        longitude:'',
        latitude:'',
        is_appoint:'YES',
        img_url:'',
        appoint_price:'',
        parking_lot_name:'',
        all_charge_price:'',
        day_price:'',
        night_price:'',
        big_day_price:'',
        big_night_price:'',
        small_day_price:'',
        small_night_price:'',
        big_car_price:'',
        small_car_price:'',
        begin_time:'',
        end_time:'',
        big_part_price:'',
        small_part_price:'',
        period_charge_price:'',
        business_begin_time:'',
        business_end_time:'',
        contact_phone:'',
        parking_lot_address:'',
        appoint_time:'',
        cancel_appoint_time:'',
        multiple:'',
        fee_model:'ALL_FREE',
        is_car_type:'NO',
        time_interval:'NO',
        toplimit_price:'',
        free_parking_time:''
      },
      searchObj:{
        keywords:''
      },
      detailList:{},
      addAreaList:{
        partition_name : '',
        parking_lot_id :''
      },
      currentIndexNav:0,
      iScartype:false,
      iSTime:false,
      dialogImageUrl:'',
      titles: '添加',
      titlesParking:'添加车位',
      titlearea:'添加区域',
      admin_id: '',
      url:'',
      token:'',
      fileLists:[]
    }
  },
  mounted () {
    this.admin_id = this.$store.state.adminId
    this.url = process.env.NODE_ENV === 'production' ? "/admin/bill/export" : '/admin/bill/export?admin_id=' + this.admin_id+ '&type=' + 'month' + '&time=' + new Date(new Date().getFullYear(),new Date().getMonth(),1).getTime() / 1000
    console.log(this.url)
    console.log(process.env.NODE_ENV)
    this.token = 'Bearer '+ this.$store.state.token
    this.getParkingLotList()
  },
  methods: {
    //图片出错
    nofind(){
      var img=event.srcElement
      img.src=require('./../../assets/images/login_bg.png')
      img.οnerrοr=null
    },
      // 上传成功
    handleSuccess (response, file, fileList) {
      console.log(response)
      if (Number(response.code) === 1000) {
        this.$message({
          type: 'success',
          message: '导入成功',
          duration: 2000,
          onClose: () => {
          }
        })
      }
    },
    // 上传之前的文件
    handleBefore (file) {
      console.log(file)
      const arr = file.name.split('.')
      const type = arr[arr.length - 1]
      console.log(type)
      // if (type !== 'csv') {
      //   this.$message.error('请上传csv文件！')
      //   return false
      // }
      //  if (type !== 'xlsx') {
      //   this.$message.error('请上传xlsx文件！')
      //   return false
      // }
    },
    downloadTemplate(){
      window.open(exportmonth)
    },
    //我的停车场
    getParkingLotList(){
      this.$api.parkingLotList({admin_id:this.admin_id}).then(res=>{
        this.parkingLotList = res
      })
    },
    // 添加停车场
    ReadyParking(){
      console.log("1111111111111111111111")
      if(this.addForm.fee_model==="ALL_CHARGE") {
        if(this.addForm.is_car_type==='YES'){
          if(this.addForm.time_interval==='YES'){
            if(!this.addForm.big_day_price){
              this.$message.error('请输入大车日间价格')
              return false
            }
            if(!this.addForm.big_night_price){
              this.$message.error('请输入大车夜间价格')
              return false
            }
            if(!this.addForm.small_day_price){
              this.$message.error('请输入小车日间价格')
              return false
            }
            if(!this.addForm.small_night_price){
              this.$message.error('请输入小车夜间价格')
              return false
            }
          }else{
            if(!this.addForm.big_car_price){
              this.$message.error('请输入大车价格')
              return false
            }
            if(!this.addForm.small_car_price){
              this.$message.error('请输入小车价格')
              return false
            }
          }
        }else{
          if(this.addForm.time_interval==='YES'){
            if(!this.addForm.day_price){
              this.$message.error('请输入日间价格')
              return false
            }
            if(!this.addForm.night_price){
              this.$message.error('请输入夜间价格')
              return false
            }
          }else{
            if(!this.addForm.all_charge_price){
              this.$message.error('请输入收费费用')
              return false
            }
          }
        }
        if(!this.addForm.free_parking_time){
          this.$message.error('请输入免费停车时间')
          return false
        }
        if(!this.addForm.toplimit_price){
          this.$message.error('请输入每天封顶价格')
          return false
        }
      }else if(this.addForm.fee_model==="PERIOD_CHARGE"){
        if(!this.addForm.begin_time){
          this.$message.error('请选择收费开始时间')
          return false
        }
        if(!this.addForm.end_time){
          this.$message.error('请选择收费结束时间')
          return false
        }
        if(this.addForm.is_car_type==='YES'){
          if(!this.addForm.big_part_price){
            this.$message.error('请输入大车价格')
            return false
          }
          if(!this.addForm.small_part_price){
            this.$message.error('请输入小车价格')
            return false
          }
        }else{
          if(!this.addForm.period_charge_price){
            this.$message.error('请输入停车价格')
            return false
          }
        }
        if(!this.addForm.free_parking_time){
          this.$message.error('请输入免费停车时间')
          return false
        }
        if(!this.addForm.toplimit_price){
          this.$message.error('请输入每天封顶价格')
          return false
        }
      }else{}
      if(this.fileList.length===0){
        this.getAddParkingLot()
      }else if(this.fileList.length === 1){
        let fd = new FormData()
        fd.append('upload_file', this.fileList[0].raw);
        this.$api.uploadImage(fd).then(res=>{
          this.addForm.img_url = res.url
          this.getAddParkingLot()
        })
      }else if(this.fileList.length>1){
        let that = this
        let filenumber = 0
        this.fileList.forEach(function (file) {
          let fd = new FormData()
          fd.append('upload_file', file.raw); // 因为要上传多个文件，所以需要遍历一下才行
          that.$api.uploadImage(fd).then(res=>{
            filenumber++
            if(filenumber===that.fileList.length){
              that.addForm.img_url+=res.url
              that.getAddParkingLot()
            }else{
              that.addForm.img_url+=res.url+","
            }  
          })
        })
      }
  
    },
    EditParking(){
      console.log("修改")
    },
    //添加停车场接口
    getAddParkingLot(){
      this.addForm.admin_id = this.admin_id
      this.$api.addParkingLot(this.addForm).then(res=>{
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.secondpage = false
        this.handleClose()
        this.getParkingLotList()
      })
    },
    // 删除停车场
    delParking(){
      this.$confirm('此操作将删除该停车场,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteParkingLot({admin_id:this.admin_id,parking_lot_id:this.detailList.parking_lot_id}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.back()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });  
    },
    //地图
    locatefal(){
      this.locate = false
    },
    //我的停车场详情页
    detailInfo(item){
      console.log(item)
      this.detailList = item
      this.getPartitionList()
      this.formAge=!this.formAge
    },
    // 区域列表
    getPartitionList(){
      this.$api.partitionList({admin_id:this.admin_id,parking_lot_id:this.detailList.parking_lot_id}).then(res=>{
        this.areaArray = res
        if(this.areaArray.length>0){
          this.searchParking.partition_id = res[0].partition_id
          this.areaoneList = res[0]
          this.currentIndexNav = 0
          this.getParkingLotDetail()
        }else{
          this.areaoneList = {}
        }   
      })
    },
    //停车场详情
    getParkingLotDetail(){
      this.searchParking.admin_id = this.admin_id
      this.searchParking.parking_lot_id = this.detailList.parking_lot_id
      this.$api.parkingLotDetail(this.searchParking).then(res=>{
        this.tableDataParking = res.place_list.list
        this.totalParking = res.place_list.page_info.total_count
      })
    },
    //添加ABC区区域
    addarea(){
      this.titlearea = '添加区域'
      this.dialogVisibleArea = true
    },
    // 修改ABC区区域
    editAreas(){
      this.titlearea = '编辑区域'
      this.addAreaList.partition_name = this.areaoneList.partition_name
      this.addAreaList.partition_id = this.areaoneList.partition_id
      this.dialogVisibleArea = true
    },
    //点击ABC区域
    arearess(item,index){
      console.log(index)
      this.currentIndexNav = index
      this.areaoneList = item
      this.searchParking.partition_id = item.partition_id
      this.getParkingLotDetail()
    },
    // 添加区域
    insertArea(){
      this.addAreaList.parking_lot_id = this.detailList.parking_lot_id
      this.$api.addPartition(this.addAreaList).then(res=>{
        this.$message({
          type:'success',
          message:'添加成功'
        })
        this.getPartitionList()
        this.handleCloseArea()
      })
    },
    // 编辑区域
    editArea(){
      this.addAreaList.parking_lot_id = this.detailList.parking_lot_id
      this.$api.editPartition(this.addAreaList).then(res=>{
        this.$message({
          type:'success',
          message:'编辑成功'
        })
        this.getPartitionList()
        this.handleCloseArea()
      })
    },
    // 删除区域
    delArea(){
      this.$confirm('此操作将删除'+this.areaoneList.partition_name+'区域,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deletePartition({admin_id:this.admin_id,partition_id:this.areaoneList.partition_id}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getPartitionList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });  
    },
    sizeChange (val) {
      this.searchParking.page = val
      this.searchParking.parking_lot_id = this.areaoneList.parking_lot_id
      this.searchParking.partition_id = this.areaoneList.partition_id
      this.getParkingLotDetail()
    },
    //批量导入返回
    importback(){
      this.titlesParking='添加车位-'+this.areaoneList.partition_name
      this.is_bulk_import = true
    },
    // 批量导入
    batchress(){
      this.titlesParking = '批量导入'
      this.is_bulk_import = false
    },
    // 添加车位确定
    deterress(){
      this.addParkingList.admin_id = this.admin_id
      this.addParkingList.partition_id = this.areaoneList.partition_id
      this.addParkingList.parking_lot_id = this.areaoneList.parking_lot_id
      this.$api.addPlace(this.addParkingList).then(res=>{
        this.$message({
          type:'success',
          message:'添加成功'
        })
        this.searchParking.partition_id = this.areaoneList.partition_id
        this.getParkingLotDetail()
        this.handleCloses()
      })
    },
    //修改车位确定
    editress(){
      this.$api.editPlace(this.addParkingList).then(res=>{
        this.$message({
          type:'success',
          message:'修改成功'
        })
        this.searchParking.partition_id = this.areaoneList.partition_id
        this.getParkingLotDetail()
        this.handleCloses()
      })
    },
    //点击添加车位
    addParkingress(){
      console.log(this.areaoneList.partition_name)
      if(this.areaoneList.partition_name=== undefined){
        this.$message.error('请先添加车位区域')
        return false
      }
      this.titlesParking='添加车位-'+this.areaoneList.partition_name
      this.dialogVisibleAddParking = true
    },
    //点击编辑车位
    editInfo(val){
      this.titlesParking='编辑车位'
      this.addParkingList.admin_id = this.admin_id
      this.addParkingList.parking_place_number = val.parking_place_number
      this.addParkingList.partition_id = val.partition_id
      this.addParkingList.parking_place_id = val.parking_place_id
      this.addParkingList.parking_lot_id = val.parking_lot_id
      this.addParkingList.car_type = val.car_type
      this.addParkingList.is_appoint = val.is_appoint
      this.addParkingList.is_charging = val.is_charging
      this.is_bulk_import = true
      this.dialogVisibleAddParking = true
    },
    //点击删除车位
    delPlaceInfo(item){
       this.$confirm('此操作将删除'+item.parking_place_number+'车位,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deletePlace({admin_id:this.admin_id,parking_place_id:item.parking_place_id}).then(res=>{
          this.$message({
            type:'success',
            message:'删除成功'
          })
          this.searchParking.partition_id = this.areaoneList.partition_id
          this.getParkingLotDetail()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });  
    },
    // 预约子页面
    orderress(){
      if (!this.addForm.proportion) {
        this.$message.error('请输入收取分红比例')
        return false
      }
      if (!this.addForm.parking_lot_name) {
        this.$message.error('请输入停车场名称')
        return false
      }
      if (!this.addForm.parking_lot_address) {
        this.$message.error('请输入位置')
        return false
      }
      if (!this.addForm.latitude) {
        this.$message.error('请点击位置后面的图标选择地址')
        return false
      }
      if (!this.addForm.longitude) {
        this.$message.error('请点击位置后面的图标选择地址')
        return false
      }
      if (!this.addForm.exit) {
        this.$message.error('请输出口')
        return false
      }
      if (!this.addForm.entrance) {
        this.$message.error('请输入口')
        return false
      } 
      if (!this.addForm.business_begin_time) {
        this.$message.error('请选择营业开始时间')
        return false
      }
      if (!this.addForm.business_end_time) {
        this.$message.error('请选择营业结束时间')
        return false
      }
      if (!this.addForm.contact_phone) {
        this.$message.error('请输入联系方式')
        return false
      }
      this.titles = '预约设置'
      this.firstpage = false
      this.orderpage = true
    },
     // 添加照片时改变
    handleChange(file,fileList){  
      this.fileList = fileList
    },
    // 删除照片
    handleRemove(file,fileList){
      this.fileList = fileList
    },
    // 缴费标准页面
    secondress(){
      if (!this.addForm.proportion) {
        this.$message.error('请输入收取分红比例')
        return false
      }
      if (!this.addForm.parking_lot_name) {
        this.$message.error('请输入停车场名称')
        return false
      }
      if (!this.addForm.parking_lot_address) {
        this.$message.error('请输入位置')
        return false
      }
      if (!this.addForm.latitude) {
        this.$message.error('请点击位置后面的图标选择地址')
        return false
      }
      if (!this.addForm.longitude) {
        this.$message.error('请点击位置后面的图标选择地址')
        return false
      }
      if (!this.addForm.exit) {
        this.$message.error('请输出口')
        return false
      }
      if (!this.addForm.entrance) {
        this.$message.error('请输入口')
        return false
      } 
      if (!this.addForm.business_begin_time) {
        this.$message.error('请选择营业开始时间')
        return false
      }
      if (!this.addForm.business_end_time) {
        this.$message.error('请选择营业结束时间')
        return false
      }
      if (!this.addForm.contact_phone) {
        this.$message.error('请输入联系方式')
        return false
      }
      this.titles = "请设置缴费标准"
      this.firstpage = false
      this.orderpage = false
      this.secondpage = true
    },
    secondorderress(){
      if(this.titles="预约设置"){
        if (!this.addForm.appoint_price) {
          this.$message.error('请输入预约费')
          return false
        }
        if (!this.addForm.appoint_time) {
          this.$message.error('请自定义车主可提前预约的时间')
          return false
        }
        if (!this.addForm.cancel_appoint_time) {
          this.$message.error('请自定义车主可提前取消的时间')
          return false
        }
        if (!this.addForm.multiple) {
          this.$message.error('请输入超出时间收费倍数')
          return false
        }
      }
      this.titles = "请设置缴费标准"
      this.orderpage = false
      this.secondpage = true
    },
    // 时段免费
    feemodel(){
      if(this.addForm.fee_model==="ALL_FREE"){
        this.addForm.all_charge_price = ''
        this.addForm.time_interval = 'NO'
        this.addForm.day_price = '' 
        this.addForm.night_price = ''
        this.addForm.big_car_price = ''
        this.addForm.small_car_price = ''
        this.addForm.is_car_type='NO'
        this.addForm.big_day_price = ''
        this.addForm.big_night_price = ''
        this.addForm.small_day_price = ''
        this.addForm.small_night_price = ''
        this.addForm.begin_time = ''
        this.addForm.end_time = ''
        this.addForm.period_charge_price = '' 
        this.addForm.big_part_price = ''
        this.addForm.small_part_price = ''
        this.addForm.free_parking_time = ''
        this.addForm.toplimit_price = ''
        this.secondsonpage = false
        this.thirdsonpage = false
      }else if(this.addForm.fee_model==="ALL_CHARGE"){
        this.addForm.begin_time = ''
        this.addForm.end_time = ''
        this.addForm.is_car_type='NO'
        this.switchCar()
        this.addForm.period_charge_price = '' 
        this.addForm.big_part_price = ''
        this.addForm.small_part_price = ''
        this.addForm.free_parking_time = ''
        this.addForm.toplimit_price = ''
        this.thirdsonpage = false
        this.secondsonpage = true
        this.switchTime()
      }else if(this.addForm.fee_model==="PERIOD_CHARGE"){
        this.addForm.is_car_type='NO'
        this.switchCar()
        this.addForm.all_charge_price = ''
        this.addForm.time_interval = 'NO'
        this.addForm.day_price = '' 
        this.addForm.night_price = ''
        this.addForm.big_car_price = ''
        this.addForm.small_car_price = ''
        this.addForm.big_day_price = ''
        this.addForm.big_night_price = ''
        this.addForm.small_day_price = ''
        this.addForm.small_night_price = ''
        this.addForm.free_parking_time = ''
        this.addForm.toplimit_price = ''
        this.secondsonpage = false
        this.thirdsonpage = true
      }
    },
    // 预约费设置返回
    orderback(){
      this.orderpage = false
      this.addForm.appoint_price = ''
      this.addForm.appoint_time = ''
      this.addForm.cancel_appoint_time = ''
      this.addForm.multiple = ''
      this.titles = "添加"
      this.firstpage = true
    },
    // 请设置缴费标准返回
    secondback(){
        this.secondpage = false
      if(this.addForm.is_appoint==='YES'){
        this.titles = "预约设置"
        this.orderpage = true
      }else{
        this.titles = "添加"
        this.firstpage = true
      }
      this.addForm.fee_model= 'ALL_FREE'
      this.feemodel()
    },
    // 区分车型
    switchCar(){
      if(this.addForm.is_car_type==='YES'){
        this.iScartype=true
      }else{
         this.iScartype=false
      }
    },
    // 时段区分
    switchTime(){
      if(this.addForm.time_interval==='YES'){
        this.iSTime=true
      }else{
         this.iSTime=false
      }
    },
    // 预约自定义
    zdy(){
      this.zdyshow1=true
    },
    // 预约自定义
    zdy2(){
      this.zdyshow2=true
    },
    // 添加
    addNotice(){
      this.titles = '添加'
      this.dialogVisible = true;     
    },
    editParking(){
      this.is_Ready = false
      this.titles = '编辑'
      this.addForm={
        parking_lot_type:this.detailList.parking_lot_type,
        proportion:this.detailList.proportion,
        contact_phone:this.detailList.contact_phone,
        longitude:this.detailList.longitude,
        latitude:this.detailList.latitude,
        is_appoint:this.detailList.is_appoint,
        img_url:'',
        appoint_price:this.detailList.appoint_price,
        parking_lot_name:this.detailList.parking_lot_name,
        all_charge_price:this.detailList.all_charge_price,
        day_price:this.detailList.day_price,
        night_price:this.detailList.night_price,
        big_day_price:this.detailList.big_day_price,
        big_night_price:this.detailList.big_night_price,
        small_day_price:this.detailList.small_day_price,
        small_night_price:this.detailList.small_night_price,
        big_car_price:this.detailList.big_car_price,
        small_car_price:this.detailList.small_car_price,
        begin_time:this.detailList.begin_time,
        end_time:this.detailList.end_time,
        big_part_price:this.detailList.big_part_price,
        small_part_price:this.detailList.small_part_price,
        period_charge_price:this.detailList.period_charge_price,
        business_begin_time:this.detailList.business_begin_time,
        business_end_time:this.detailList.business_end_time,
        parking_lot_address:this.detailList.parking_lot_address,
        appoint_time:this.detailList.appoint_time.toString(),
        cancel_appoint_time:this.detailList.cancel_appoint_time.toString(),
        multiple:this.detailList.multiple,
        fee_model:this.detailList.fee_model,
        is_car_type:this.detailList.is_car_type,
        time_interval:this.detailList.time_interval,
        toplimit_price:this.detailList.toplimit_price,
        free_parking_time:this.detailList.free_parking_time,
      }  
      if(this.addForm.appoint_time==="5"||this.addForm.appoint_time==="10"||this.addForm.appoint_time==="20"||this.addForm.appoint_time==="30")
        this.zdyshow1 = false
      else
        this.zdyshow1 = true
      if(this.addForm.cancel_appoint_time==="5"||this.addForm.cancel_appoint_time==="10"||this.addForm.cancel_appoint_time==="20"||this.addForm.cancel_appoint_time==="30")
         this.zdyshow2 = false
      else
        this.zdyshow2 = true
      if(this.addForm.fee_model==="ALL_FREE"){
        this.secondsonpage = false
        this.thirdsonpage = false
      }else if(this.addForm.fee_model==="ALL_CHARGE"){
        this.switchCar()
        this.thirdsonpage = false
        this.secondsonpage = true
        this.switchTime()
      }else if(this.addForm.fee_model==="PERIOD_CHARGE"){
        this.switchCar()
        this.secondsonpage = false
        this.thirdsonpage = true
      }  
      this.dialogVisible = true;
    },
    back(){
      this.formAge = !this.formAge;
      this.getParkingLotList()
      this.tableDataParking = []
      this.detailList = {}
      this.areaoneList = {}
    },
    handleClick(){

    },
    handleCloselocate(){
      this.locate = false;
    },
    //关闭添加子页面时
    handleClose (done) {
        this.dialogVisible = false
        this.firstpage=true
        this.orderpage=false
        this.secondpage=false
        this.secondsonpage=false
        this.zdyshow1=false
        this.zdyshow2=false
        this.addForm={
          parking_lot_type:'PARKING_LOT',
          proportion:'',
          contact_phone:'',
          longitude:'',
          latitude:'',
          is_appoint:'YES',
          img_url:'',
          appoint_price:'',
          parking_lot_name:'',
          all_charge_price:'',
          day_price:'',
          night_price:'',
          big_day_price:'',
          big_night_price:'',
          small_day_price:'',
          small_night_price:'',
          big_car_price:'',
          small_car_price:'',
          begin_time:'',
          end_time:'',
          big_part_price:'',
          small_part_price:'',
          period_charge_price:'',
          business_begin_time:'',
          business_end_time:'',
          parking_lot_address:'',
          appoint_time:'',
          cancel_appoint_time:'',
          multiple:'',
          fee_model:'ALL_FREE',
          is_car_type:'NO',
          time_interval:'NO',
          toplimit_price:'',
          free_parking_time:''
        }
        this.fileList=[];
        this.iScartype = false
        this.is_Ready = true
    },
    handleCloses(){
      this.dialogVisibleAddParking = false
      this.addParkingList = {
        parking_place_number:'',
        car_type:'SMALL',
        is_appoint:'NO',
        is_charging:'NO'
      },
      this.is_bulk_import = true
    },
    handleCloseArea(){
      this.dialogVisibleArea = false
      this.addAreaList = {
        partition_name : '',
        parking_lot_id :''
      }  
    },
    //时间戳转时间
    dateFormat (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
      if(date===''){
        return ''
      }else{
        date = new Date(date * 1000)
        const o = {
          'M+': date.getMonth() + 1, // 月份
          'd+': date.getDate(), // 日
          'h+': date.getHours(), // 小时
          'm+': date.getMinutes(), // 分
          's+': date.getSeconds(), // 秒
          'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
          S: date.getMilliseconds() // 毫秒
        }
        if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
        for (const k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
          }
        }
        return fmt
      }  
    }
  }
}
</script>

<style scoped>
  .amap-demo {
    height: 400px;
  }
  .flex >>>.el-dialog__title{
    margin-left:15px;
  }
  /* .areathing> >>>.el-button--primary.is-plain{
  } */
  .flex >>>.el-tabs__nav-wrap::after,.flex >>>.el-tabs__active-bar.is-top{
    width: 0%!important;
  }
  .flex >>>.el-tabs__item.is-top.is-active{
      font-size:18px;
  }
  .flex >>>.el-upload-list__item.is-ready{
    width: 100px;
    height: 80px;
  }
  .flex >>>.el-upload.el-upload--picture-card{
    width: 100px;
    height: 80px;
  }
  .flex >>>.el-upload.el-upload--picture-card>i{
    font-size:20px;
    display: flex;
    justify-content: center;
    margin-top: 25px;
  }
  .flex >>>.el-date-editor--datetimerange.el-input__inner{
    width: 350px;
  }
  .margintop{
    margin-top:20px;
  }
  .marginbottom{
    margin-bottom: 20px;
  }
  .vfor{
    width: 20%;
    float: left;
    margin:0 4% 2% 0;
    height:280px;
    padding:15px 5px;
    font-size:13px;
  }
  .center{
    text-align:center;
    margin-bottom:15px;
  }
  .addres{
    margin-left:10px;
  }
  .addre{
    float: right;
    margin-right:30px;
    color:#00BFFF;
    font-size:14px;
    cursor: pointer;
  }
  .addredel{
    float: right;
    margin-right:30px;
    color:red;
    font-size:14px;
    cursor: pointer;
  }
  .iconstop{
    margin:10px 0 0 10px;
  }
  .icons{
    margin:5px 0 0 10px;
  }
  .marginleft{
    margin-left:30px;
    margin-top:-20px;
  }
  .fontweight{
    font-weight: 600;
  }
  .el-icon-edit{
    font-size:18px;
  }
  .zdy{
    text-decoration:underline;
    cursor:pointer;
    color:#00BFFF;
  }
  .el-icon-back{
    font-weight: 500;
    font-size: 25px;
  }
  .yjxq{
    font-weight: 500;
    font-size: 18px;
  }
  .bord{
    margin-bottom: 30px;
    font-size: 15px;
    letter-spacing:1px;
  }
  .floatRight{
    float: right;
    margin-right:40px;
  }
  .xiexian{
    display:flex;
    width: 100px;
    margin:-63px 0 0 -115px;
  }
  .xiexians{
    display:flex;
    width: 100px;
    margin:-63px 0 0 -15px;
  }
  .xiexianson{
    font-weight: 800;
    font-size: 20px;
    cursor: pointer;
  }
  .deldanger{
    color:red;
    font-size:13px;
    letter-spacing: 1px;
  }
  .delblue{
     color:#00BFFF;
     letter-spacing: 1px;
  }
  .areaclass{
    cursor: pointer;
    color:#696969;
    float:left;
    font-size:13px;
    border:1px solid #696969;
    padding:4px 15px;
    margin:0 5px 2px 0;
    border-radius: 4px;
  }
  .areaclass.active{
    color:white;
    background: #409EFF;
  }
</style>
